<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script src="../../js/axios-0.21.0.js"></script>
    <script src="../../js/vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="../main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-5">
            </div>
            <div class="col-md-7">

                <ul class="nav nav-pills " style="padding-top:10px">
                    <li style="margin: 10px;background:rgb(255,102,102)"><h4 style="margin:15px;color:rgb(255,231,250)">
                        1.购物车</h4></li>
                    <li style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px" class="text-muted">
                        2.填写订单</h4></li>
                    <li style="margin:10px;background:rgb(246,246,246)"><h4 style="margin:15px" class="text-muted">
                        3.支付订单</h4></li>
                </ul>
            </div>
        </div>
        <hr style="border:solid 2px red;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-12" style="padding-left:150px">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-4">商品信息</div>
                                <div class="col-md-2">单价（元）</div>
                                <div class="col-md-2 text-center">数量</div>
                                <div class="col-md-2">金额（元）</div>
                                <div class="col-md-2">操作</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <ul class="media-list">
                    <div class="media" v-for="(key,value) in cart.items" :key="key.productId">
                        <div >
                            <input type="checkbox" name="ids" :value="key.productId"  :checked="key.checked" @click="updateCartItem(key.productId)">
                        </div>
                        <div class="media-left media-middle">
                            <img :src="'http://localhost:8080/images/'+key.imageUrl" alt="" class="media-object"
                                 style="width:130px">
                        </div>
                        <div class="media-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="text-muted small">{{key.productName}}</span>
                                    </div>
                                    <div class="col-md-2">
                                        <span class="text-muted small">￥{{key.jprice}}</span>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <button class="btn btn-default"
                                                        @click.prevent="updateCount(key.productId,key.count-1)"><span
                                                        class="glyphicon glyphicon-minus"/></button>
                                            </div>
                                            <input type="text" class="form-control text-center" name="" id=""
                                                   v-model="key.count">
                                            <div class="input-group-btn">
                                                <button class="btn btn-default"
                                                        @click.prevent="updateCount(key.productId,key.count+1)"><span
                                                        class="glyphicon glyphicon-plus"/></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <span class="text-muted small text-center">￥{{key.jprice*key.count}}</span>
                                    </div>
                                    <div class="col-md-2">
                                        <a href="" class="text-muted small" @click.prevent="removeCart(key.productId)">删除</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <hr>
                    </div>
                </ul>
            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-2 text-center">
                        <strong class="h4 center-block">店铺合计</strong>
                    </div>
                    <div class="col-md-3 col-md-offset-7">
                        <div class="row">
                            <div class="col-md-6">
                                <p><span class="small text-muted">总计：</span><span style="color:red">￥{{cart.totalMoney}}</span>
                                </p>
                                <p class="small text-muted">已节省：<span>￥{{cart.saveMoney}}</span></p>
                            </div>
                            <div class="col-md-6">
                                <a href="../order/place-order.html" class="btn btn-danger" >结算</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            cart: {
                totalMoney: "",
                saveMoney: "",
                items: [],
                ids: [1,2,3]
            },
            user: null
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '../../login.html';
                    } else {
                        this.user = res.data.data;
                        // 获取购物车
                        this.showCart();
                    }
                });
            },
            showCart() {
                axios.get("/cart/showCart")
                    .then(resp => {
                        if (resp.data.message == "not-login") {
                            location.href = "/front/login.html"
                            return
                        }
                        console.log(resp.data);
                        this.cart = resp.data.cart;
                    })
            },
            removeCart(productId) {
                console.log(productId)
                axios.get("/cart/removeCart?productId=" + productId)
                this.showCart()
            },
            updateCount(productId, count) {
                console.log(productId)
                console.log(count)
                let data = "productId=" + productId + "&count=" + count
                axios.get("/cart/updateCount?" + data)
                    .then(resp => {
                        this.cart = resp.data
                    })
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            //将勾选的购物车项更新到redis中
            updateCart(){
                console.log(this.cart.ids)
                let ids=this.cart.ids
                axios.post("/cart/updateCart",ids)
                .then(res=>{
                    console.log(res.data)
                    //this.cart=res.data
                }).catch(error=>{
                    console.log(error)
                })
            },
            //updateCartItem 修改购物车项的选中属性
            updateCartItem(productId){
                axios.get("/cart/updateCartItem?productId="+productId)
                .then(res=>{
                    console.log(res.data)
                    this.cart=res.data
                }).catch(error=>{
                    console.log(error)
                })
            }

        }
    })
</script>
</html>